<template>
    <router-view></router-view>
    <div class="course">
        <div class="title">
            <div class="title_name">
                <span>课程</span>
            </div>
            <div @click="xiaoxi" class="message"></div>
        </div>
        <div ref="content" class="content">
            <div class="main">
                <div class="lun_bo">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="item in lun_bo_tu ">
                            <img class="lun_bo_tu" :src="item.url" alt="">
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="mo_kuai">
                    <div @click="join" class="mo_kuai_item">
                        <div class="shang">
                            <img src="../assets/class.png" alt="">
                        </div>
                        <span>已参加</span>
                    </div>
                    <div @click="look_class" class="mo_kuai_item">
                        <div class="shang">
                            <img src="../assets/all_class.png" alt="">
                        </div>
                        <span>全部课程</span>
                    </div>
                    <div @click="publish" class="mo_kuai_item">
                        <div class="shang">
                            <img src="../assets/fa_bu.png" alt="">
                        </div>
                        <span>发布课程</span>
                    </div>
                </div>
                <div class="tui_jian">
                    <div class="head">
                        <span class="L">小编推荐视频</span>
                        <span @click="dian" class="R">查看更多</span>
                    </div>
                    <div class="nei_rong">
                        <van-swipe class="videw_swipe" :show-indicators="false" :loop="false" :width="160">
                            <van-swipe-item v-for="(item,index) in tui_jian " :key="index" @click="shipin(index)">
                                <div class="aaa">
                                    <div class="tu">
                                        <img :src="item.url" alt="">
                                        <div class="icon"></div>
                                    </div>
                                    <div class="zi">
                                        <span class="type">{{item.type}}</span>
                                        <span class="introduce">{{item.introduce}}</span>
                                    </div>
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </div>

                </div>
                <div class="new_class" v-for="item,index in kuai_one">
                    <div class="head_one">
                        <span class="L">{{item.title}}</span>
                        <span @click="dian_one(index)" class="R">查看更多</span>
                    </div>
                    <div class="kuai">
                        <div class="hang_kuai" @click="dian_ji(cc)" v-for="(item,cc) in kuai_one[index].data.slice(0,6)" :key="cc">
                            <div class="tu">
                                <img :src="item.url" alt="">
                            </div>
                            <div class="zi">
                                <span class="introduce">{{item.introduce}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tui_jian">
                    <div class="head">
                        <span class="L">更多人气教程</span>
                        <span @click="dian" class="R">查看更多</span>
                    </div>
                    <div class="nei_rong">
                        <van-swipe class="videw_swipe" :show-indicators="false" :loop="false" :width="160">
                            <van-swipe-item v-for="(item,index) in tui_jian " :key="index" @click="shipin(index)">
                                <div class="aaa">
                                    <div class="tu">
                                        <img :src="item.url" alt="">
                                        <div class="icon"></div>
                                    </div>
                                    <div class="zi">
                                        <span class="type">{{item.type}}</span>
                                        <span class="introduce">{{item.introduce}}</span>
                                    </div>
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const toute = useRoute()
var lun_bo_tu = [
    {
        url: new URL('../assets/1.jpeg', import.meta.url).href
    },
    {
        url: new URL('../assets/2.jpeg', import.meta.url).href
    },
    {
        url: new URL('../assets/3.jpeg', import.meta.url).href
    },
    {
        url: new URL('../assets/2.jpeg', import.meta.url).href
    },
]
var tui_jian = [
    {
        url: new URL('../assets/4.jpeg', import.meta.url).href,
        type: '押花',
        introduce: '牛尾巴基本无策怒三级菜单'
    },
    {
        url: new URL('../assets/5.jpeg', import.meta.url).href,
        type: '编织',
        introduce: '超好学的手工编织'
    },
    {
        url: new URL('../assets/6.jpeg', import.meta.url).href,
        type: '蓬蓬球',
        introduce: '可爱蓬蓬球--萌萌泰迪狗狗'
    },
    {
        url: new URL('../assets/5.jpeg', import.meta.url).href,
        type: '滴胶',
        introduce: '牛尾巴基本无策怒三级菜单'
    }
]
var kuai_one = [
    {
        title: '新课上线',
        data: [
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理呜呜呜呜"
            },
            {
                url: new URL('../assets/22.jpg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
        ]
    },
    {
        title: '新手入门必修',
        data: [
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理呜呜呜呜"
            },
            {
                url: new URL('../assets/22.jpg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
        ]
    },
    {
        title: '金牌导师热门课',
        data: [
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理呜呜呜呜"
            },
            {
                url: new URL('../assets/22.jpg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
        ]
    },
    {
        title: '进阶特训营',
        data: [
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理呜呜呜呜"
            },
            {
                url: new URL('../assets/22.jpg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/33.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/44.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
            {
                url: new URL('../assets/11.jpeg', import.meta.url).href,
                introduce: "镍币我不违背车微博不必我为诶哦偶尔玩佛理"
            },
        ]
    },

]
//计算滚动高度
const content = ref()
onMounted(() => {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    var vdaH = h - 90 + "px"
    const boxOne = content.value
    boxOne.style.height = vdaH
    // console.log(boxOne)
    // console.log(vdaH)
})

function xiaoxi() {
    router.push({
        name: 'xiao_xi',
    })
}
function join() {
    router.push({
        name: 'join',
    })
}
function look_class() {
    router.push({
        name: 'classify'
    })
}
function publish() {
    router.push({
        name:'fabu'
    })
}
function dian() {
    router.push({
        name:'course'
    })
}
function dian_one(i:any) {
    console.log(kuai_one[i].title)
    router.push({
        name:'gengduo',
        query:{
            title:kuai_one[i].title
        }
    })
}
function shipin(i: any) {
    console.log(i)
    router.push({
        name:'shipin'
    })
}
function dian_ji(i: any) {
    console.log(i)
    router.push({
        name:'shipin'
    })
}
</script>
    
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.course {
    width: 100%;
    flex: 1;
    /* background-color: pink; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    width: 95%;
    height: 40px;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.title_name {
    flex: 1;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.title_name>span {
    margin-left: 32px;
}

.message {
    width: 35px;
    height: 35px;
    /* background-color: aquamarine; */
    background-image: url(../assets/meg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
}

.content {
    width: 95%;
    /* height: 94%; */
    /* background-color: aqua; */
    overflow: scroll;
}

.main {
    width: 100%;
    /* height: 180%; */
    /* background-color: bisque; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lun_bo {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
    /* background-color: aqua; */
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 140px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.lun_bo_tu {
    width: 356px;
    height: 140px;
    border-radius: 10px;
}

.mo_kuai {
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    /* background-color: blueviolet; */
    display: flex;
    align-items: center;
}

.mo_kuai_item {
    width: 60px;
    height: 90px;
    margin-left: 50px;
    /* background-color: brown; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.mo_kuai_item>.shang {
    width: 50px;
    height: 50px;
    border-radius: 40%;
    background-color: #fdeded;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mo_kuai_item>.shang>img {
    width: 30px;
    height: 30px;
}

.mo_kuai_item>span {
    font-size: 12px;
}

.tui_jian {
    width: 100%;
    /* height: 200px; */
    margin-bottom: 10px;
    /* background-color: blue; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.head {
    width: 100%;
    height: 40px;
    /* background-color: aqua; */
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.head .R {
    font-size: 10px;
    color: #d0d0d0;
}

.nei_rong {
    width: 100%;
    flex: 1;
    /* background-color: chocolate; */
}

.videw_swipe .van-swipe-item {
    /* width: 300px; */
    height: 260px;
}

.aaa {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
}

.tu {
    width: 100%;
    height: 196px;
    /* background-color: beige; */
    position: relative;
}

.tu>img {
    width: 96%;
    height: 100%;
    border-radius: 5px;
}

.icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #797979;
    position: absolute;
    bottom: 7px;
    right: 13px;
    background-image: url(../assets/play.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.zi {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.type {
    margin-top: 5px;
    margin-bottom: 2px;
    font-size: 10px;
    color: #797979;
}

.introduce {
    display: inline-block;
    width: 92%;
    height: 100%;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    -webkit-box-orient: vertical;

}

.new_class {
    width: 100%;
    /* height: 340px; */
    margin-bottom: 10px;
    /* background-color: chartreuse; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.head_one {
    width: 100%;
    height: 40px;
    /* background-color: aqua; */
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.head_one .R {
    font-size: 10px;
    color: #d0d0d0;
}

.kuai {
    width: 100%;
    /* height: 500px; */
    /* background-color: blanchedalmond; */
    display: flex;
    flex-wrap: wrap;
}

.hang_kuai {
    width: 174px;
    height: 100%;
    /* background-color: cornflowerblue; */
    display: flex;
    flex-direction: column;
}

.hang_kuai>.tu {
    width: 100%;
    height: 100px;
    /* background-color: aqua; */
}

.hang_kuai>.tu>img {
    width: 96%;
    height: 100%;
    border-radius: 7px;
    margin-left: 5%
}

.hang_kuai>.zi {
    width: 96%;
    flex: 1;
    /* background-color: blue; */
    display: flex;
    flex-direction: column;
    margin-left: 5%;
}

.hang_kuai>.zi>.introduce {
    margin-top: 5px;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    -webkit-box-orient: vertical;
}
</style>